<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加资源</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>

<div class="container" id="resourceAdd">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <form class="form-horizontal" action="" method="post">
        <h2 class="form-signin-heading" style="color: black">添加资源</h2>
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">资源名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" placeholder="admin"
                       v-model="resourceInfo.name">
            </div>
        </div>
        <div class="form-group">
            <label for="url" class="col-sm-2 control-label">地址</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="url" placeholder="url" name="url"
                       v-model="resourceInfo.url">
            </div>
        </div>
        <div class="form-group">
            <label for="url" class="col-sm-2 control-label">地址</label>
            <div class="col-sm-10">
                <select name="pid" v-model="resourceInfo.pid" class="form-control">
                    <option :value="0">根节点</option>
                    <option v-for="r in resources_" :value="r.id">{{r.name}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <button class="btn btn-lg btn-primary btn-block" type="button" style="width: 100%"
                        @click="addResource()">提交
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    new Vue({
        el: "#resourceAdd",
        data: {
            resourceInfo: {},
            resources_: []
        },
        created() {   //创建
            this.getResource();
        },
        methods: {
            //根节点返现
            getResource() {
                var vm = this;
                $.post("/resource/resourceInfo", {}, function (response) {
                    if (response.code == 200) {
                        vm.resources_ = response.data
                    }
                })
            },
            //添加
            addResource() {
                var vm = this;
                $.post("/resource/add", vm.resourceInfo, function (response) {
                    if (response.code == 200) {
                        layer.msg('提交成功！', {
                            time: 1000,
                            end: function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name)),
                                    vm.getResource();
                                //    存在小页面的话，该语句是关闭页面的
                            }
                        })
                    } else {
                        layer.msg('提交失败！', {
                            time: 1000,
                        })
                    }
                })
            }
        }
    })
</script>
</body>
</html>